<html xmlns:th="http://www.thymeleaf.org">
<!-- Thymeleaf的命名空间，将静态页面转换为动态的视图 -->
<head>
<meta content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
</head>
<body>

	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<!-- 需要动态处理的元素使用 th: 为前缀，通过 ${} 访问 model中的属性-->
				<h3 class="panel-title" th:text="${title}">title</h3>
			</div>
			<div class="panel-body">
				<!--数据判断-->
				<div th:if="${not #lists.isEmpty(employees)}">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>姓名</th>
								<th>职位</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!--数据迭代-->
							<tr th:each="employee: ${employees}">
								<td th:text="${employee.id}" onclick="tdclick(this)">ID</td>
								<td class="name" th:text="${employee.name}" onclick="tdclick(this)">Name</td>
								<td class="role" th:text="${employee.role}" onclick="tdclick(this)">Role</td>
								<td> <a class ="update"  th:url="${employee.uri}">更改</a> | <a class ="delete"  th:href="${employee.uri}">删除</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="panel panel-primary">
			<div class="panel-heading">
				<!-- 需要动态处理的元素使用 th: 为前缀，通过 ${} 访问 model中的属性-->
				<h3 class="panel-title" th:text="${addEmployee}">addEmployee</h3>
			</div>
			<div class="panel-body">
				<form>
					<div class="row">
						<div class="form-group col-md-6">
							<label for="name">姓名</label> <input type="text"
								class="form-control" id="name">
						</div>
					</div>
					<div class="row">
						<div class="form-group col-md-6">
							<label for="role">职位</label> <input type="text"
								class="form-control" id="role">
						</div>
					</div>
					<div class="row">
						<div class="form-group col-md-6">
							<button id ="submit" type="button" class="btn btn-primary">新增</button>
						</div>
					</div>
				</form>
			</div>
        </div>
        
	</div>

    <script th:src="@{jquery.min.js}" type="text/javascript"></script>  
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script> 

	<!--在 javascript 中访问model属性-->
	<script th:inline="javascript">
        var title = [[${title}]];
        console.log(title);
        
        $("#submit").on("click", function () {
            console.log("click");
            var name =  $("#name").val();
            var role = $("#role").val();
            
            $.ajax({
                url: "/employees",
                type : "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({'name': name, 'role': role}),
                success: function (data) {
                	alert("Add success!");
                	$.ajax({
                        url: "/employees",
                        type: "GET",
                        success: function (data) {
                        	location.reload();
                        }
                	});
                },
                error: function () {
                    console.log("error");
                }
            });
        });
        
        $("a.update").each(function() {
			$(this).on("click", function () {
	        	var updateUrl = $(this).attr("url");
	            var name = $(this).parent().siblings(".name").html();
	            var role = $(this).parent().siblings(".role").html();
				$.ajax({
	                url: updateUrl,
	                type: "PUT",
	                contentType: "application/json;charset=utf-8",
	                data: JSON.stringify({'name': name, 'role': role}),
	                success: function (data) {
	                	alert("Update success!");
	                	$.ajax({
	                        url: "/employees",
	                        type : "GET",
	                        success: function (data) {
	                        	location.reload();
	                        }
	                	});
	                }
				});
      	  	});
        });  
        
        function tdclick(tdobject) { 
        	 var td=$(tdobject); 
        	 td.attr("onclick", ""); 
        	 //1,取出当前td中的文本内容保存起来 
        	 var text=td.text(); 
        	 //2,清空td里面的内容 
        	 td.html(""); //也可以用td.empty(); 
        	 //3，建立一个文本框，也就是input的元素节点 
        	 var input=$("<input>"); 
        	 //4，设置文本框的值是保存起来的文本内容 
        	 input.attr("value", text); 
        	 input.bind("blur",function(){ 
        	  var inputnode=$(this); 
        	  var inputtext=inputnode.val(); 
        	  var tdNode=inputnode.parent(); 
        	  tdNode.html(inputtext); 
        	  tdNode.click(tdclick); 
        	  td.attr("onclick", "tdclick(this)"); 
        	 }); 
        	 
        	 input.keyup(function(event){ 
        	  var myEvent =event||window.event; 
        	  var kcode=myEvent.keyCode; 
        	  if(kcode==13){ 
        	   var inputnode=$(this); 
        	   var inputtext=inputnode.val(); 
        	   var tdNode=inputnode.parent(); 
        	   tdNode.html(inputtext); 
        	   tdNode.click(tdclick); 
        	  } 
        	 }); 
        	  
        	 //5，将文本框加入到td中 
        	 td.append(input); 
        	 var t =input.val(); 
        	 input.val("").focus().val(t); 
        	  
        	 //6,清除点击事件 
        	 td.unbind("click"); 
        	}
    </script>

</body>
</html>